<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/header&footer.css"/>
<link rel="stylesheet" type="text/css" href="css/radio.css"/>
</head>
<body>
<header class="h-top">
	<div class="t-top clearFix">
		<div class="t-wrap">
			<h1 class="logo"><a href="index.html" class="fl">网易云音乐</a></h1>
			<nav class="top-nav fl">
				<a href="#" class="active"><span>发现音乐</span><i class="cor"></i></a>
				<a href="#"><span>我的音乐</span><i class="cor"></i></a>
				<a href="#"><span>朋友</span><i class="cor"></i></a>
				<a href="#"><span>商城</span></a><i class="cor"></i></span>
				<a href="#"><span>音乐人</span></a><i class="cor"></i></span>
				<a href="#" class="last"><span>下载客户端</span><i class="hot"></i></a>	
			</nav>
			<div class="landing fr">
				<a href="#" class="link fr">登陆</a>
				<div class="down-tab">
					<ul class="d-list">
						<li><a href="#"><i class="d-icon d-icon1"></i>手机号登录</a></li>
						<li><a href="#"><i class="d-icon d-icon2"></i>微信登录</a></li>
						<li><a href="#"><i class="d-icon d-icon3"></i>QQ号登录</a></li>
						<li><a href="#"><i class="d-icon d-icon4"></i>新浪微博登录</a></li>
						<li><a href="#"><i class="d-icon d-icon5"></i>网易邮箱账号登录</a></li>
					</ul>
				</div>
			</div>
			<form class="search fr">
				<input type="text" class="" value="单曲/歌手/专辑/歌单/MV/用户"/>
			</form>
		</div>
	</div>
	<div class="n-nav clearFix">
		<div class="n-wrap">
			<nav class="nav fl">
				<a href="index.html"><span>推荐</span></a>
				<a href="ranking.html"><span>排行榜</span></a>
				<a href="sheet.html"><span>歌单</span></a>
				<a href="radio.html" class="n-active"><span>主播电台</span></a>
				<a href="#"><span>歌手</span></a>
				<a href="#"><span>新碟上架</span></a>
			</nav>
		</div>
	</div>
</header>
<main class="radio">
	<div class="radio-body">
		<div class="radio-wrap">
			<div class="top-wrap">
				<div class="radio-station clearFix">
					<ul class="radio-01">
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg"></div>
								<span>有声书</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg02"></div>
								<span>知识技能</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg03"></div>
								<span>商业财经</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg04"></div>
								<span>人文历史</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg05"></div>
								<span>外语时间</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg06"></div>
								<span>亲子宝贝</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg07"></div>
								<span>创作|翻唱</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg08"></div>
								<span>音乐故事</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg09"></div>
								<span>3D|电子</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg10"></div>
								<span>相声曲艺</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg11"></div>
								<span>情感调频</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg12"></div>
								<span>美文读物</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg13"></div>
								<span>脱口秀</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg14"></div>
								<span>广播剧</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg15"></div>
								<span>二次元</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg16"></div>
								<span>明星做主播</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg17"></div>
								<span>娱乐|影视</span>
							</a>
						</li>
						<li>
							<a href="#" class="radio-icon">
								<div class="r-bg18"></div>
								<span>科技科学</span>
							</a>
						</li>
					</ul>
					<ul class="radio-02 clearFix">
						<li>
							<a href="#" class="radio-icon2">
								<div class="r-bg2"></div>
								<span>做个毛主播</span>
							</a>
						</li>
					</ul>
					<span class="left-icon"></span>
					<span class="right-icon"></span>
				</div>
				<div class="radio-page">
					<span id="one"></span>
					<span id="two"></span>
				</div>
			</div>
			<div class="radio-sec clearFix">
					<section class="l-radio">
						<header class="l-r-title clearFix">
							<h3>
								<a href="#">推荐节目</a>
							</h3>
							<a href="#" class="l-more">更多&gt;</a>
						</header>
						<ul>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/1.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">第二季 - 你知道松鼠桂鱼名字的来由吗？</a></h3>
									<p><a href="#">围炉夜话</a></p>
								</div>
								<a href="#" class="radio-tab">人文历史</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/2.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">十二星座的睡前故事</a></h3>
									<p><a href="#">伦敦华语电台</a></p>
								</div>
								<a href="#" class="radio-tab">脱口秀</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/3.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">精益创业：创业像开车一样简单</a></h3>
									<p><a href="#">老马商书房</a></p>
								</div>
								<a href="#" class="radio-tab">商业财经</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/4.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">钮大可与陈本瑜 山谷与风的对话（1989）-听山谷的爱与风的心事</a></h3>
									<p><a href="#">林飞的唱片私藏馆</a></p>
								</div>
								<a href="#" class="radio-tab">音乐故事</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/5.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">《李光斗观察》世界上最容易的赚钱方式：故事营销</a></h3>
									<p><a href="#">李光斗观察</a></p>
								</div>
								<a href="#" class="radio-tab">商业财经</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/6.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">香炸天的炸藕盒&茄盒，一口吃下菜与肉的大满足！</a></h3>
									<p><a href="#">小厨FM</a></p>
								</div>
								<a href="#" class="radio-tab">脱口秀</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/7.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">张雨生 想念我（1989）向学生告别，向明天致敬</a></h3>
									<p><a href="#">林非的唱片私藏馆</a></p>
								</div>
								<a href="#" class="radio-tab">音乐故事</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/8.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">第二季 - 诈尸</a></h3>
									<p><a href="#">中国诡实录</a></p>
								</div>
								<a href="#" class="radio-tab">有声书</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/9.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">Cheer绮贞 让我想一想（1998）-不确定的年代里，最真实的声音</a></h3>
									<p><a href="#">林非的唱片私藏馆</a></p>
								</div>
								<a href="#" class="radio-tab">音乐故事</a>
							</li>
							<li class="station clearFix">
								<a href="#" class="radio-media">
									<img src="img/010.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info">
									<h3><a href="#">史上最淫乱的公主-刘楚玉</a></h3>
									<p><a href="#">圣人请卸妆</a></p>
								</div>
								<a href="#" class="radio-tab">脱口秀</a>
							</li>
						</ul>
					</section>
					<section class="r-radio">
						<header class="l-r-title clearFix">
							<h3>
								<a href="#">节目排行榜</a>
							</h3>
							<a href="#" class="l-more">更多&gt;</a>
						</header>
						<ul>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">01</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/011.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">他突然对你冷淡，原因只有一个</a></h3>
									<p><a href="#">晓苏电台</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">02</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/012.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">雨蝶-丸子</a></h3>
									<p><a href="#">丸子www</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">03</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/013.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">再不听话，我就把你拴在我身边。</a></h3>
									<p><a href="#">程一电台</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">04</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/014.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">爱就是和你一起浪费时间</a></h3>
									<p><a href="#">小北电台</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">05</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/015.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">雷佳音：打架、喝酒、夜总会、火烧云、乌鸦，与流浪的我</a></h3>
									<p><a href="#">读那本书的那年</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">06</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/016.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">【囧菌翻唱】欧皇（其实我已经非酋初级了X）…</a></h3>
									<p><a href="#">封茗囧菌</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">07</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/017.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">我的一个道姑朋友</a></h3>
									<p><a href="#">苏③</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">08</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/018.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">要不，你把我删了吧</a></h3>
									<p><a href="#">米莉.听见花开</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">09</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/019.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">好意变尴尬，又是你也该自私点</a></h3>
									<p><a href="#">每天陪你醒来</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
							<li class="station clearFix">
								<div class="radio-rank">
									<span class="NO1">10</span>
									<span class="up-down"><i></i>1</span>
								</div>
								<a href="#" class="radio-media2">
									<img src="img/020.jpg"/>
									<i class="radio-play"></i>
								</a>
								<div class="radio-info2">
									<h3><a href="#">【ASMR】蘑菇头馨儿的掏耳和风铃（直播录制、视频在微博）</a></h3>
									<p><a href="#">馨儿的安眠享受【ASMR】</a></p>
								</div>
								<div class="PregressBar">
									<span>
										<i></i>
									</span>
								</div>
							</li>
						</ul>
					</section>
				</div>
		</div>
	</div>
</main>
<footer class="bottom">
	<div class="f-footer">
		<div class="f-wrap">
			<div class="f-left fl">
				<nav>
					<a href="#">关于网易</a>
					<span class="line">|</span>
					<a href="#">客户服务</a>
					<span class="line">|</span>
					<a href="#">服务条款</a>
					<span class="line">|</span>
					<a href="#">网站导航</a>
					<span class="line">|</span>
					<a href="#">意见反馈</a></nav>
				<P>网易公司版权所有©1997-2017<span class="company">杭州乐读科技有限公司运营：<a href="#">浙网文[2015]0415-135号</a></span></P>
			</div>
			<ul class="f-right fr">
				<li class="f-musicia f-logo"><a href="#">独立音乐人</a></li>
				<li><a href="#" class="f-logo f-logo2">音乐专栏</a></li>
				<li><a href="#" class="f-logo f-logo3">自媒</a></li>
				<li><a href="#" class="f-logo f-logo4">赞赏</a></li>
			</ul>
		</div>
	</div>
</footer>
</body>
</html>
